// main.tsx - 应用入口文件
// 这是React应用的启动文件，负责将React组件渲染到HTML页面中

// 导入StrictMode组件：React的严格模式，用于在开发环境下检测潜在问题
// StrictMode会检查过时的生命周期方法、不安全的副作用等，帮助提高代码质量
import { StrictMode } from 'react'

// 导入createRoot函数：React 18的新特性，用于创建React根节点
// 与之前的ReactDOM.render不同，createRoot支持并发特性
import { createRoot } from 'react-dom/client'

// 导入全局CSS样式文件：应用的整体样式，包括重置样式和基础样式
import './index.css'

// 导入App组件：应用的根组件，包含整个应用的结构和逻辑
import App from './App.tsx'

// 导入国际化配置：初始化i18n国际化设置，支持多语言
import './locales/i18n'

// 获取HTML中的root元素：document.getElementById获取id为'root'的DOM元素
// ! 是TypeScript的非空断言操作符，表示我们确信这个元素一定存在
// 如果找不到root元素，应用将无法渲染，所以确保index.html中有<div id="root"></div>
const rootElement = document.getElementById('root')!

// 创建React根节点：createRoot函数将DOM元素转换为React根容器
// React根节点是React应用挂载到DOM的起点
const root = createRoot(rootElement)

// 渲染应用：root.render方法将React组件渲染到根节点
// 这里使用StrictMode包裹App组件，只在开发环境生效
// StrictMode不会影响生产构建，它只是开发时的辅助工具
root.render(
  <StrictMode>
    <App />
  </StrictMode>,
)
